<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2: Basic Video Template</title>
<style type="text/css">
#soundmanager-debug {
 /* SM2 debug container (optional, use or customize this as you like - makes in-browser debug output more useable) */
 position:fixed;_position:absolute;right:1em;bottom:1em;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:monaco,"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
</style>
<!-- some CSS for this demo page, not required for SM2 -->
<link rel="stylesheet" href="template.css" />



<!-- SM2 BAREBONES TEMPLATE: START -->

<!-- include SM2 library -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>

<!-- And now, customize it! -->
<script type="text/javascript">

// soundManager.debugMode = false; // disable debug output

soundManager.url = '../../swf/'; // path to directory containing SoundManager2 .SWF file
soundManager.flashVersion = 9; // flash 9.0r115+ required for MovieStar mode
soundManager.useMovieStar = true; // enable AAC/MPEG4 video in SM2

if (window.location.toString().match('nodebug')) {
  soundManager.debugMode = false;
}

soundManager.onload = function() {
  // soundManager.createSound() etc. may now be called
  soundManager.createVideo({id:'photos3Demo',url:'http://freshly-ground.com/data/video/Yahoo!%20Photos%203%20UI.MP4'});
  soundManager.play('photos3Demo');
}

</script>

<!-- SM2 BAREBONES TEMPLATE: END -->



</head>

<body>
<div style="width:650px"> <!-- bad form! ;) -->

 <h1>SoundManager 2: Basic Video Example</h1>
 <p>This is a simple example showing how video can be loaded and played by SM2, with Flash 9.0r115+ (codename "MovieStar", AKA Flash 9 update 3.) See related <a href="http://www.adobe.com/support/documentation/en/flashplayer/9/releasenotes.html#fixes_90115">Flash 9 release notes</a> for supported formats.</p>

 <h2>How it works</h2>
 <p>This page includes the SoundManager 2 script which starts up ASAP, and assigns a few video-specific parameters. Javascript API calls can then be made to create, load and play certain MPEG4 video files.</p>

 <!-- sm2-container can be resized via JS to fit movie, or via CSS -->
 <div id="sm2-container" style="width:640px;height:480px"><!-- flash movie will go here --></div>
 <p>Direct video link: <a href="http://freshly-ground.com/data/video/Yahoo! Photos 3 UI.MP4">Source .MP4</a></p>

 <h2>Code</h2>
<code>
<pre>soundManager.url = '../../swf/'; <span>// path to directory containing SoundManager2 .SWF file</span>
soundManager.flashVersion = 9;
soundManager.useMovieStar = true;

soundManager.onload = function() {
  <span>// soundManager.createSound() etc. may now be called</span>
  soundManager.createVideo({
    id:'photos3Demo',
    url:'http://freshly-ground.com/data/video/Yahoo! Photos 3 UI.MP4'
  });
  soundManager.play('photos3Demo');
}</pre></code>

<h2>Metadata, displaying the movie and so on</h2>

<p>Additionally, an <em>onmetadata()</em> function handler may be assigned which will be called when meta data is available, including video dimensions (width/height). This is useful for setting the dimensions of the SWF, and/or positioning the container.</p>

<p>Note that to "hide" a movie, positioning or CSS visibility should be used; display:none will destroy a flash movie, and will break things. Also, only one movie can be played at a time.</p>

</div>

</body>
</html>
